<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="statics/layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<button class="layui-btn" id="layerAForm">弹出一个表单</button>
<form class="layui-form" lay-filter="myForm" action="" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">单行输入框</label>
        <div class="layui-input-block">
            <input name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input name="like[write]" title="写作" type="checkbox">
            <input name="like[read]" title="阅读" checked="" type="checkbox">
            <input name="like[game]" title="游戏" type="checkbox">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">子类型</label>
        <div class="layui-input-block">
            <input name="subkind[]" value="1"  title="电厂1" type="checkbox">
            <input name="subkind[]" value="2"  title="电厂2" type="checkbox">
            <input name="subkind[]" value="3"  title="电厂3" type="checkbox">
            <input name="subkind[]" value="4"  title="电厂4" type="checkbox">
            <input name="subkind[]" value="5"  title="电厂5" type="checkbox">
            <input name="subkind[]" value="6"  title="电厂6" type="checkbox">
            <input name="subkind[]" value="7"  title="电厂7" type="checkbox">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">开关-默认关</label>
        <div class="layui-input-block">
            <input name="close" lay-skin="switch" lay-text="ON|OFF" lay-filter="sexSwitch" type="checkbox">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开关-默认开</label>
        <div class="layui-input-block">
            <input checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF" type="checkbox">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input name="sex" value="男" title="男" checked="" type="radio">
            <input name="sex" value="女" title="女" type="radio">
            <input name="sex" value="禁" title="禁用" disabled="" type="radio">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">普通文本域</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <!--<div class="layui-form-item layui-form-text">
      <label class="layui-form-label">编辑器</label>
      <div class="layui-input-block">
        <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
      </div>
    </div>-->
    <div class="layui-form-item layui-hide">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script type="text/javascript" src="statics/layui/layui.all.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layer', 'jquery'], function (form, layer, $) {
        $('#layerAForm').click(function () {
            layer.open({
                type: 1,
                area: ['800px', '600px'],
                content: $('[lay-filter="myForm"]'),
                btn:['提交', '重置', '取消'],
                yes: function (index, layero) {
                    // debugger;
                    layero.find('form').find('button[lay-submit]').click();
                    return false;
                },
                btn2: function (index, layero) {
                    // debugger;
                    layero.find('form').find('button[type="reset"]').click();
                    return false;
                }
            });
        });
        form.on('switch(sexSwitch)', function(data){
            debugger;
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //开关是否开启，true或者false
            console.log(data.value); //开关value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
        });
        form.on('submit(demo1)', function (data) {
            // debugger;
            layer.alert(JSON.stringify(data.field));
            // json提交
            return false;
        });
    });
</script>
</body>
</html>